<template>
    <view class="bg-[#FCFCFE]">
        <!-- header -->
        <v-header />
        <!-- card -->
        <view class="max-w-[1297px] mx-auto">
            <view class="max-md:px-[5px]">
                <view class="h-[60px] flex items-center mt-[15px] max-md:px-[5px]">
                    <view class="font-bold text-3xl min-w-[40px]">{{ $t("blocks.title") }}</view>
                </view>
                <view class="max-md:hidden">
                    <up-divider :hairline="true" />
                </view>
                <view class="text-sm text-[#6C757d] max-md:hidden">
                    <text class="font-bold">Sponsored: Crudo Protocol</text>
                    <text>: Presale Stage 2 Live at $0.009, Listing soon at $0.20.</text>
                    <text class="text-[rgb(64,138,222)] font-bold cursor-pointer"> Join Presale Now!</text>
                </view>
                <view class="grid grid-cols-4 gap-[10px] max-md:grid-cols-1 mt-[20px] max-md:mt-0">
                    <uni-group mode="card">
                        <view class="flex flex-col justify-center items-start gap-[10px]">
                            <view class="text-[#6C7781] text-[12px]">{{ $t("blocks.card1.title") }}</view>
                            <view v-if="blocksOverviewData.usage !== ''" class="text-[18px]">
                                {{ blocksOverviewData.usage + "%" }}
                            </view>
                            <view v-else>
                                <up-loading-icon />
                            </view>
                        </view>
                    </uni-group>
                    <uni-group mode="card">
                        <view class="flex flex-col justify-center items-start gap-[10px]">
                            <view class="text-[#6C7781] text-[12px]">{{ $t("blocks.card2.title") }}</view>
                            <view v-if="blocksOverviewData.size !== ''" class="text-[18px]">
                                {{ blocksOverviewData.size }}
                            </view>
                            <view v-else>
                                <up-loading-icon />
                            </view>
                        </view>
                    </uni-group>
                    <uni-group mode="card">
                        <view class="flex flex-col justify-center items-start gap-[10px]">
                            <view class="text-[#6C7781] text-[12px]">{{ $t("blocks.card3.title") }}</view>
                            <view v-if="blocksOverviewData.reward !== ''" class="text-[18px]">
                                {{ (blocksOverviewData.reward / 100000000).toFixed(4) + " HNY" }}
                            </view>
                            <view v-else>
                                <up-loading-icon />
                            </view>
                        </view>
                    </uni-group>
                    <uni-group mode="card">
                        <view class="flex flex-col justify-center items-start gap-[10px]">
                            <view class="text-[#6C7781] text-[12px]">{{ $t("blocks.card4.title") }}</view>
                            <view v-if="blocksOverviewData.gas != ''" class="text-[18px]">
                                {{ (blocksOverviewData.gas / 100000000).toFixed(4) + " HNY" }}
                            </view>
                            <view v-else>
                                <up-loading-icon />
                            </view>
                        </view>
                    </uni-group>
                </view>
            </view>
            <view class="mt-[20px] min-h-[650px] max-md:px-[5px]">
                <uni-group mode="card">
                    <view class="flex flex-col justify-between gap-[3px]">
                        <view class="flex items-center gap-[5px] mt-[5px] text-[14px]">
                            <text>{{ $t("blocks.table.tips1") }}</text>
                            <text>{{ blocksData.total }}</text>
                            <text>{{ $t("blocks.table.tips2") }}</text>
                        </view>
                        <view class="text-[12px] text-[#6C757d] mt-[5px]">
                            <text>({{ $t("blocks.table.tips3") }}</text>
                            <text>{{ blocksData.start }}</text>
                            <text>{{ $t("blocks.table.tips4") }}</text>
                            <text>{{ blocksData.end }})</text>
                        </view>
                    </view>
                    <view class="mt-[20px]">
                        <uni-table :border="false" stripe :emptyText="$t('address.table.noData')">
                            <uni-tr>
                                <uni-th align="center">{{ $t("blocks.table.col1") }}</uni-th>
                                <uni-th align="center">{{ $t("blocks.table.col2") }}</uni-th>
                                <uni-th align="center">{{ $t("blocks.table.col3") }}</uni-th>
                                <uni-th align="center">{{ $t("blocks.table.col4") }}</uni-th>
                                <uni-th align="center">{{ $t("blocks.table.col5") }}</uni-th>
                            </uni-tr>
                            <uni-tr v-for="v in blocksData.list" :key="v.hash">
                                <uni-td align="center">
                                    <view class="text-[#4285F4] text-[14px] cursor-pointer" @click="onBlock(v.height)">
                                        {{ v.height }}
                                    </view>
                                </uni-td>
                                <uni-td align="center">{{ v.time }}</uni-td>
                                <uni-td align="center">{{ v.ntx }}</uni-td>
                                <uni-td align="center">
                                    <view
                                        class="text-[#4285F4] text-[14px] cursor-pointer"
                                        @click="onAddress(v.witness)"
                                    >
                                        {{ v.witness }}
                                    </view></uni-td
                                >
                                <uni-td align="center">{{ (v.reward / 100000000).toFixed(4) }} HNY</uni-td>
                            </uni-tr>
                        </uni-table>
                        <view class="flex justify-end items-center gap-[20px] pt-[20px] pb-[5px] cursor-pointer">
                            <view class="flex items-center gap-[10px]">
                                <view class="text-[#6C757d]">{{ $t("common.page.showRows") }}</view>
                                <view class="w-[60px]">
                                    <uni-data-select
                                        v-model="page.ps"
                                        :localdata="psData"
                                        :clear="false"
                                        placement="top"
                                        @change="onPageSizeChange"
                                    />
                                </view>
                            </view>
                            <view>
                                <uni-pagination
                                    :total="blocksData.total"
                                    :page-size="page.ps"
                                    :current="page.p"
                                    :showIcon="true"
                                    @change="onPageChange"
                                />
                            </view>
                        </view>
                    </view>
                </uni-group>
            </view>
        </view>
        <!-- footer -->
        <v-footer />
    </view>
</template>
<script setup>
import { reactive } from "vue"
import { onLoad } from "@dcloudio/uni-app"
import { navigateTo, timeAgo } from "@/utils/tools"
import { getBlocksOverviewData, getBlocksList } from "@/api/common"
import { useI18n } from "vue-i18n"

const { t } = useI18n()

const blocksOverviewData = reactive({
    usage: "",
    size: "",
    reward: "",
    gas: ""
})
const blocksData = reactive({
    list: {},
    total: 0,
    start: 0,
    end: 0
})
const page = reactive({
    p: 1,
    ps: 10
})
const psData = [
    { text: "10", value: 10 },
    { text: "25", value: 25 },
    { text: "50", value: 50 }
]

const getBlocksListFunc = async () => {
    try {
        const { list, total } = await getBlocksList(page)
        blocksData.total = total
        blocksData.list = list.map((v, i) => {
            if (i == 0) blocksData.start = v.height
            if (i == list.length - 1) blocksData.end = v.height
            return {
                ...v,
                time: timeAgo(v.time)
            }
        })
    } catch (error) {
        console.log(error)
    }
}

const getBlocksOverviewDataFunc = async () => {
    try {
        const data = await getBlocksOverviewData()
        for (const key in blocksOverviewData) {
            if (data[key] != null && data[key] != undefined) {
                blocksOverviewData[key] = data[key]
            }
        }
    } catch (error) {
        console.log(error)
    }
}

const onPageSizeChange = async (e) => {
    try {
        uni.showLoading({ title: t("common.loading") })
        await getBlocksListFunc()
    } catch (error) {
        console.log(error)
    } finally {
        uni.hideLoading()
    }
}

const onPageChange = async (e) => {
    try {
        uni.showLoading({ title: t("common.loading") })
        page.p = e.current
        await getBlocksListFunc()
    } catch (error) {
        console.log(error)
    } finally {
        uni.hideLoading()
    }
}

const onBlock = (height) => {
    navigateTo(`block?height=${height}`)
}

const onAddress = (address) => {
    navigateTo(`address?address=${address}`)
}

onLoad(() => {
    getBlocksOverviewDataFunc()
    getBlocksListFunc()
})
</script>
